<template>
  <div>
    <div>
      <h4>基础信息</h4>
      <el-row>
        <el-col :span="18">
          <div class="kuang">
            <ul>
              <li>任务名称： 中秋活动</li>
              <li>负责员工： 顾明星</li>
              <li>标签：<span>中秋</span></li>
              <li>创建时间： 2021-09-20 16:24:10</li>
            </ul>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" style="width: 110px; height: 110px;"/>
          </div>
          <el-button type="primary">下载二维码</el-button>
        </el-col>
      </el-row>

    </div>
    <div>
      <h4>群设置</h4>
      <div class="kuang">
        <el-row>
          <el-col :span="3">
            <div>欢迎语：</div>
          </el-col>
          <el-col :span="18">
            <el-input type="textarea" :rows="3"></el-input>
          </el-col>
        </el-row>

        <el-row class="two">
          <el-col :span="3">
            <div>群聊：</div>
          </el-col>
          <el-col :span="18">
            <div style="background: #eee; width: 240px; padding: 8px;">
              <el-row>
                <el-col :span="5">
                  <img src="https://www.baidu.com/img/flexible/logo/pc/result.png"/>
                </el-col>
                <el-col :span="19">
                  <el-row>
                    <el-col :span="16">
                      <div style="margin: 5px 5px">测试</div>
                      <div style="margin: 0 5px">3/200</div>
                    </el-col>
                    <el-col :span="8">
                      进行中
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="kuang">
      <h4>客户明细</h4>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-input v-model="form.name" placeholder="联系人名称" style="width: 90%;"></el-input>
          </el-col>
          <el-col :span="6">
            <el-input v-model="form.name" placeholder="归属员工" style="width: 90%;"></el-input>
          </el-col>
          <el-col :span="6">
            <el-input v-model="form.name" placeholder="群聊名称" style="width: 90%;"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary">查询</el-button>
            <el-button>重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column  prop="groupName" label="联系人名称" width="200">
      </el-table-column>
      <el-table-column  prop="lordName" label="归属员工" width="150">
      </el-table-column>
      <el-table-column  prop="groupTag" label="所在群聊" width="200">
      </el-table-column>
      <el-table-column  prop="PeopleNum" label="入群时间" width="120">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="currentHandler('detail', scope.row.id)">详情</el-button>
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" @click="">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div>
      <h4>入群统计</h4>
      <div class="block">
        <el-date-picker
          v-model="timeData"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>
      </div>
    </div>
    <el-button size="small" type="primary" @click="back" style="margin-top: 20px;">返回</el-button>
  </div>

</template>
<script>
export default {
  name: "AutoCreateDetail",
  data() {
    return {
      checked: true,
      // 时间段
      timeData: '',
      // 列表数据
      listData: [],
      // 是否加载
      loading: false,
      // 客户明细查询
      form:{
        name: ''
      }
    }
  },
  methods: {
    back() {
      this.$emit("currentHandler","list")
    }
  }
}
</script>

<style scoped>
  ul {padding:0; margin: 0;}
  ul li {padding:0; margin: 5px 0; list-style:none}
  span {background: rgb(236,245,255); color: rgb(104,182,255); border: 1px solid rgb(232,243,255); padding: 4px 6px;}
  .two img {width: 50px; height: 50px; border-radius: 3px;}
  .kuang {padding: 0 25px; width: 720px;}
  .two {margin-top: 20px;}
</style>
